<template>
    <div class="person">
       <h2>{{ personList }}</h2>
       <!--变得好看一点得展示-->
       <ul>
        <li v-for="(item, index) in personList" :key="index">{{ item.name }}--{{ item.age }}</li>
       </ul>
    </div>
</template>

<script lang="ts" setup name="Person">
import { defineProps,withDefaults} from 'vue'
import { type PersonsList } from '@/types';
//这是一个子组件，它接收一个person对象作为props
//接收a 
//let x = defineProps(['a','b'])
//console.log(x.a)

//只接收
//defineProps(["personList"])

//接收list+限制类型
//defineProps<{personList?: PersonsList}>()

//接收list+限制类型+限制必要性+默认值
withDefaults(defineProps<{personList?: PersonsList}>(), { 
    personList: ()=>[
    { id: 1, name: '张三', age: 20 },
    { id: 2, name: '李四', age: 25 },]
})
</script>